<template>
  <view class="container bg-img flex-1 flex-col justify-start flex">
    <image
      :class="
        isBigSreen
          ? 'w-[256rpx] h-[256rpx] qipaosi-big'
          : 'w-[128rpx] h-[128rpx] qipaosi'
      "
      class="fixed bbb"
      src="@/static/qipao.png"
      mode="widthFix"
    ></image>
    <view>
      <view class="flex justify-center w-full mt-16 mb-[11%]">
        <view class="w-[42.6%] relative">
          <image
            class="w-full h-full relative z-10"
            src="@/static/qiang.png"
            mode="widthFix"
          ></image>
          <image
            :class="
              isBigSreen
                ? 'w-[124rpx] h-[124rpx] qipaoyi-big'
                : 'w-[62rpx] h-[62rpx] qipaoyi'
            "
            class="absolute bbb"
            src="@/static/qipao.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
      <view class="flex justify-center flex-col w-full mt-5">
        <view class="relative">
          <image
            :class="
              isBigSreen
                ? 'w-[256rpx] h-[256rpx] qipaoer-big'
                : 'w-[128rpx] h-[128rpx] qipaoer'
            "
            class="absolute"
            src="@/static/qipao.png"
            mode="widthFix"
          ></image>
          <image
            :class="
              isBigSreen
                ? 'w-[385rpx] h-[385rpx] qipaosan-big'
                : 'w-[176rpx] h-[176rpx] qipaosan'
            "
            class="absolute"
            src="@/static/qipao.png"
            mode="widthFix"
          ></image>
          <view class="w-full aspect-video">
            <swiper
              class="swiper w-full h-full relative"
              :class="isBigSreen ? 'h-[916rpx]' : 'h-[458rpx]'"
              circular
              :autoplay="true"
              :previous-margin="isBigSreen ? '80rpx' : '40rpx'"
              :next-margin="isBigSreen ? '80rpx' : '40rpx'"
              :current="state.current"
              @change="(e) => (state.current = e.detail.current)"
            >
              <swiper-item
                class="w-full h-full flex items-center"
                :class="state.current == index ? '' : 'bbb'"
                v-for="(item, index) in list"
                :key="index"
              >
                <view
                  class="w-full ccc"
                  :class="
                    state.current == index
                      ? 'h-full'
                      : isBigSreen
                      ? 'h-[936rpx]'
                      : 'h-[368rpx]'
                  "
                >
                  <image
                    class="w-full h-full"
                    :class="state.current == index ? 'rounded-xl' : ''"
                    :src="item"
                  ></image>
                </view>
              </swiper-item>
              <!-- <swiper-item class="w-full h-full flex items-center bbb">
          <view class="h-[368rpx] w-full">
            <image
              class="w-full h-full"
              src="https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/postcard/20240704/postcard_66860e5764867.jpg"
            ></image>
          </view>
        </swiper-item> -->
            </swiper>
          </view>
        </view>
        <view
          class="w-[57%] flex mx-auto mt-[10%]"
          style="aspect-ratio: 428/160"
        >
          <image class="w-full h-full" src="@/static/ddd.png"></image>
        </view>
      </view>
    </view>
    <view
      @click="go"
      class="bg-[#2568EC] mt-[12%] mx-auto text-white font-bold flex justify-center items-center"
      :class="
        isBigSreen
          ? 'w-[856rpx] h-[168rpx] rounded-[100rpx] text-2base'
          : 'w-[428rpx] h-[84rpx] rounded-[50rpx]'
      "
    >
      立即参与生成
    </view>
  </view>
</template>

<script setup lang="ts">
import { getPicToWall } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, computed, onMounted } from "vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const state = reactive({
  current: 0,
});

const list = ref([]);

const getList = () => {
  getPicToWall().then((res) => {
    list.value = res.pics;
  });
};

onLoad(() => {
  getList();
});
const go = () => {
  uni.navigateTo({
    url: "/pages/index/chooseKeyword",
  });
};
</script>

<style lang="scss" scoped>
.bg-img {
  background: url("https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/bg/bgg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .go {
    width: 42%;
    padding: 2%;
    font-family: Source Han Serif CN, Source Han Serif CN;
    font-weight: 700;
    font-size: 48rpx;
    color: #2568ec;
    text-align: center;
    background: #ffe376;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
    border-radius: 67rpx 67rpx 67rpx 67rpx;
  }
  .swiper {
    .aaa {
      z-index: 555;
    }

    .ccc {
      transition: width 5s ease-in-out;
    }
  }
  .bbb {
    opacity: 0.5;
  }
  .qipaoyi {
    left: -40rpx;
    top: -20rpx;
    z-index: 5;
  }
  .qipaoyi-big {
    left: -80rpx;
    top: -40rpx;
    z-index: 5;
  }
  .qipaoer {
    left: -50rpx;
    top: -45rpx;
    z-index: 5;
  }
  .qipaoer-big {
    left: -100rpx;
    top: -90rpx;
    z-index: 5;
  }
  .qipaosan {
    right: -65rpx;
    bottom: -75rpx;
    z-index: 5;
  }
  .qipaosan-big {
    right: -130rpx;
    bottom: -150rpx;
    z-index: 5;
  }
  .qipaosi {
    left: 18rpx;
    bottom: -50rpx;
    z-index: 5;
  }
  .qipaosi-big {
    left: 36rpx;
    bottom: -100rpx;
    z-index: 5;
  }
}
</style>
